<template>
	<view class="zh-goods-list">
		<u-search :placeholder="searchData.placeholder" :list="searchData.list" @click="search" @delOne = "delOne"></u-search>
		<view class="filter display-flex justify-between align-center">
			<view class="left display-flex align-center">
				<view class="item" @click="allSort">
					<text>综合</text>
				</view>
				<u-filter class="item" value="价格" :sort="priceSort" @click="priceSortClick"></u-filter>
				<u-filter class="item" value="更新时间" :sort="timeSort" @click="timeSortClick"></u-filter>
			</view>
			<view class="right">
				<view class="display-flex align-center" @click="openDrawer">
					<text>筛选</text>
					<image src="@/static/icons/filter_icon.png" class="filter-icon"/>
				</view>
			</view>
		</view>
		<!-- <view class="mt-200" v-if="goodsData.total === 0">
			<empty-data  :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view> -->
		<view class="mt-20 mb-20 ml-20" v-if="goodsData.total === 0">
			<span class="font-24 font-666">抱歉，没找到指定商品，为您推荐规格近似的商品</span>
		</view>
		<view class="list"  v-if="goodsData.total > 0 || goodsData.noDataTotal > 0">
			<view class="item display-flex justify-between" v-for="item in goodsData.list" :key="item.id"
			@click="navigateTo('/pages/shop/goodsDetail?spckid=' + item.spckid + '&spcwid=' + item.spcwid + '&spbhid=' + item.spbhid)">
				<view class="thumbnail">
					<view class="name">
						<text>{{ item.wpggA }}</text>
					</view>
					<image :src="previewImg(file.url)" mode="aspectFit" v-for="file in item.wpggAFileDataList" :key="file.id"/>
				</view>
				<view class="right flex">
					<view class="display-flex align-center font-28 font-bold">
						<view class="owns-tags">自营</view>
						<view class="ml-15">{{ item.spzs }}</view>
					</view>
					<view class="tags display-flex flex-wrap">
						<text class="tags-right" v-if="item.wpggA">{{ item.wpggA }}</text>
						<text class="tags-right" v-if="item.spcd">{{ item.spcd }}</text>
						<text class="tags-right" v-if="item.spckmc">{{ item.spckmc }}</text>
					</view>
					<view class="content">
						<view class="font-FF661B display-flex align-center mt-20">
							<text class="font-28">{{ item.price?'¥' + item.price : '电议' }}</text>
							<text class="font-24" v-if="item.price">/吨</text>
						</view>
						<view class="display-flex align-end justify-between mt-10">
							<view class="display-flex align-center font-666 font-20">
								<text>{{ item.updateTime }}</text>
								<text class="ml-10">|</text>
								<text class="ml-10">{{ item.sheng + item.shi}}</text>
							</view>
							<image src="@/static/icons/home_purchase_car_icon.png" class="purchase-car-icon"  @click.stop="openWeightPopup(item)"/>
						</view>
					</view>
				</view>
			</view>
			<view class="load-more" v-if="goodsData.total > 0">
				<u-load-more ref="loadMoreRef"></u-load-more>
			</view>
		</view>
		<u-drawer class="drawer" mode="right" width="584" :show="drawerData.show" @close="changeDrawer">
			<template v-slot:top>
				<view class="content">
					<view>
						<view class='title'>
							<text class="font-30 font-bold">品名</text>
						</view>
						<input class="input mt-30" placeholder="请输入品名" v-model="goodsData.query.spzs"/>
					</view>
					<view>
						<view class='title mt-30'>
							<text class="font-30 font-bold">品牌</text>
						</view>
						<input class="input mt-30" placeholder="请输入品牌" v-model="goodsData.query.spcd"/>
					</view>
					<!-- <select-btn-group title="品名" :list="drawerData.produceName"></select-btn-group> -->
					<select-btn-group title="纱支" :list="drawerData.shazhi" @click="selectOne($event,'shazhi')"></select-btn-group>
					<select-btn-group title="用途" :list="drawerData.useful" @click="selectOne($event,'useful')"></select-btn-group>
					<select-btn-group title="工艺" :list="drawerData.technology" @click="selectOne($event,'technology')"></select-btn-group>
					<select-btn-group title="工序" :list="drawerData.procedure" @click="selectOne($event,'procedure')"></select-btn-group>
					<select-btn-group title="产地" :list="drawerData.place" @click="selectOne($event,'place')"></select-btn-group>
					<select-btn-group title="漂染性" :list="drawerData.bleach" @click="selectOne($event,'bleach')"></select-btn-group>
					<select-btn-group title="仓库" :list="drawerData.stock" @click="selectOne($event,'stock')"></select-btn-group>
				</view>
			</template>
			<template v-slot:bottom>
				<view class="bottom display-flex align-center justify-between">
					<button class="reset-btn app-reset-button" @click="resetGoodsQuery">重置</button>
					<button class="sure-btn ml-30 app-primary-button" @click="checkGoods">确定</button>
				</view>
			</template>
		</u-drawer>
		<weight-edit-popup :show="showWeightPopup" :data="goodsData.item" @close="closeWeightPopup" @sure="shoppingCartWeightSure"></weight-edit-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { goods, stock } from '@/api'
	import { tip, util, nav } from '@/utils'
	import type { GoodsData, ShoppingCartAddData } from '@/@type/goods'
	import { GoodsOrderBy } from '@/enum/goods'
	import { onLoad, onPullDownRefresh, onReachBottom, onUnload } from '@dcloudio/uni-app';
	import weightEditPopup from '@/pages/shop/components/weight-edit-popup'
	import { useGoodsHistoryStore } from '@/store/goodsHistory'
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const loadMoreRef = ref()
	
	const goodsHistoryStore= useGoodsHistoryStore()
	const showWeightPopup = ref(false)
	const drawerData:any = reactive({
		show: false,
		query:{},
		//produceName:[],
		shazhi:[],
		//brand:[],
		useful:[],
		technology:[],
		procedure:[],
		place:[],
		bleach:[],
		stock: [],
	})
	const priceSort = ref(-1)
	const timeSort = ref(0)
	//货物
	const goodsData: any = reactive({
		query:{
			wpggAs:[],
			wpggBs:[],
			wpggCs:[],
			wpggDs:[],
			wpggEs:[],
			wpggFs:[],
			spzs:'',
			spcd:'',
			spckids:[],
			keyword:'',
			orderBy:GoodsOrderBy.timeDown,
			noLoading:false
		},
		noDataQuery: {
			wpggAs:[],
			wpggBs:[],
			wpggCs:[],
			wpggDs:[],
			wpggEs:[],
			wpggFs:[],
			spzs:'',
			spcd:'',
			spckids:[],
			keyword:'',
			orderBy:GoodsOrderBy.timeDown,
			noLoading:false
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		list:[],
		total:'',
		noDataTotal:'',
		item:{}
	})
	
	const stockData = reactive({
		query:{},
		params: {
		    pageNum:1,
		    pageSize:999
		},
	})
	
	const searchData:any = reactive({
		placeholder:'品种、规格、工艺等',
		list:[]
	})
	
	onLoad((options:any) => {
		if(options) {
			if(options.keyword) {
				searchData.list = [options.keyword]
				goodsData.query.keyword = options.keyword
			}
			if(options.info) {
				const info = util.getObjParams(options.info)
				for(let item in info) {
					if(item === 'a') {
						goodsData.query.wpggAs = info.a
					} else if(item === 'b'){
						goodsData.query.wpggBs = info.b
					} else if(item === 'c'){
						goodsData.query.wpggCs = info.c
					} else if(item === 'd'){
						goodsData.query.wpggDs = info.d
					} else if(item === 'e'){
						goodsData.query.wpggEs = info.e
					} else if(item === 'f'){
						goodsData.query.wpggFs = info.f
					}
				}
			}
		}
		
		goodsList()
		stockList()
		goodsDetail()
	})
	
	onUnload(() => {
		searchData.list = []
	})
	
	uni.$on('searchGoodsList', (data:any) => {
		console.log(data)
		if(data && data.keyword) {
			searchData.list = [data.keyword]
			goodsData.query.keyword = data.keyword
			refresh()
		}
	})
	
	const search = () => {
		navigateTo('/pages/shop/search?placeholder=' + searchData.placeholder + '&prevPage=goodsList')
	}
	
	const delOne = (index:number) => {
		goodsData.query.keyword = ''
		searchData.list = []
		refresh()
	}
	
	const goodsList = (cb?:Function) => {
		goods.getGoodsList(goodsData.query, goodsData.params).then((res:any) => {
			cb && cb()
			if(goodsData.noDataTotal > 0) {
				goodsData.list = []
				goodsData.noDataTotal = ''
			}
			goodsData.total = res.total
			const data = res.rows
			data.forEach((item: any) => {
				item.updateTime = item.updateTime?util.getDate(item.updateTime):""
			})
			goodsData.list = [...goodsData.list,...data]
			if(goodsData.total === 0) {
				noDataGoodsList()
			}
		})
	}
	
	const noDataGoodsList = () => {
		goods.getGoodsList(goodsData.noDataQuery, {
			pageNum:1,
			pageSize:20
		}).then((res:any) => {
			goodsData.noDataTotal = res.total
			const data = res.rows
			data.forEach((item: any) => {
				item.updateTime = item.updateTime?util.getDate(item.updateTime):""
			})
			goodsData.list = data
			
		})
	}
	
	const goodsDetail = () => {
		goods.getGoodsSpec(drawerData.query).then((res:any) => {
			drawerData.shazhi = res.data.a.map((i:any) => {return {name:i.name,id:i.id, active:false}})
			drawerData.technology = res.data.b.map((i:any) => {return {name:i.name,id:i.id, active:false}})
			drawerData.procedure = res.data.c.map((i:any) => {return {name:i.name,id:i.id, active:false}})
			drawerData.useful = res.data.d.map((i:any) => {return {name:i.name,id:i.id, active:false}})
			drawerData.place = res.data.e.map((i:any) => {return {name:i.name,id:i.id, active:false}})
			drawerData.bleach = res.data.f.map((i:any) => {return {name:i.name,id:i.id, active:false}})
		})
	} 
	
	const stockList = () => {
		stock.getWarehouseList(stockData.query, stockData.params).then((res:any) => {
			drawerData.stock = res.data.map((i:any) => {return {name:i.spckmc, id:i.spckid, active:false}})
		})
	}
	
	const selectOne = (data:any, type:string) => {
		if(type === 'shazhi') {
			drawerData.shazhi[data.index].active = !drawerData.shazhi[data.index].active
		} else if(type === 'useful') {
			drawerData.useful[data.index].active = !drawerData.useful[data.index].active	
		} else if(type === 'technology') {
			drawerData.technology[data.index].active = !drawerData.technology[data.index].active
		} else if(type === 'procedure') {
			drawerData.procedure[data.index].active = !drawerData.procedure[data.index].active	
		} else if(type === 'place') {
			drawerData.place[data.index].active = !drawerData.place[data.index].active	
		} else if(type === 'bleach') {
			drawerData.bleach[data.index].active = !drawerData.bleach[data.index].active
		} else if(type === 'stock') {
			drawerData.stock[data.index].active = !drawerData.stock[data.index].active	
		}
	}

	const checkGoods = () => {
		goodsData.query.wpggAs = drawerData.shazhi.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.wpggDs = drawerData.useful.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.wpggBs = drawerData.technology.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.wpggCs = drawerData.procedure.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.wpggEs = drawerData.place.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.wpggFs = drawerData.bleach.filter((i:any) => i.active === true).map((j:any) => j.name)
		goodsData.query.spckids = drawerData.stock.filter((i:any) => i.active === true).map((j:any) => j.id)
		refresh()
		changeDrawer()
	}
	
	onReachBottom(() => {
		if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
		goodsData.params.pageNum++
		loadMoreRef.value.changeStatusLoading()
		setTimeout(() => {
			goodsData.query.noLoading = true
			goodsList(() => {
				loadMoreRef.value.changeStatusNoLoading()
				if(goodsData.params.pageNum * goodsData.params.pageSize > goodsData.total) return loadMoreRef.value.changeStatusNoMore()
			})
		}, 300)
	})
	
	
	onPullDownRefresh(() => {
		if(goodsData.total === 0) uni.stopPullDownRefresh()
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	const openWeightPopup = (item:any) => {
		if(nav.isCertify()) {
			item.weight = item.upShelvesWeight
			goodsData.item = item
			changeWeightPopup()
		}
		
	}
	
	const closeWeightPopup = () => {
		changeWeightPopup()
	}
	
	const changeWeightPopup = () => {
		showWeightPopup.value = !showWeightPopup.value
	}
	
	const shoppingCartWeightSure = (data:any) => {
		changeWeightPopup()
		purchaseCarAdd(data)
	}
	
	const refresh = () => {
		goodsData.query.noLoading = false
		if(loadMoreRef.value) loadMoreRef.value.changeStatusNoLoading()
		goodsData.params.pageNum = 1
		goodsData.list = []
		goodsList()
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const openDrawer = () => {
		drawerData.shazhi.map((i:any) => goodsData.query.wpggAs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.technology.map((i:any) => goodsData.query.wpggBs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.procedure.map((i:any) => goodsData.query.wpggCs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.useful.map((i:any) => goodsData.query.wpggDs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.place.map((i:any) => goodsData.query.wpggEs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.bleach.map((i:any) => goodsData.query.wpggFs.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		drawerData.stock.map((i:any) => goodsData.query.spckids.map((j:any) => {
			if(i.name === j) {
				i.active = true
			}
		}))
		changeDrawer()
	}
	
	const changeDrawer = () => {
		drawerData.show = !drawerData.show
	}
	
	const allSort = () => {
		goodsData.query.orderBy = GoodsOrderBy.timeDown
		timeSort.value = 0
		priceSort.value = -1
		refresh()
	}
	
	const priceSortClick = () => {
		goodsData.query.orderBy = priceSort.value == 1?GoodsOrderBy.priceDown:GoodsOrderBy.priceUp
		priceSort.value = priceSort.value == 1?0:1
		timeSort.value = -1
		refresh()
	}
	
	const timeSortClick = () => {
		goodsData.query.orderBy = timeSort.value == 1?GoodsOrderBy.timeDown:GoodsOrderBy.timeUp
		timeSort.value = timeSort.value == 1?0:1
		priceSort.value = -1
		refresh()
	}
	
	const purchaseCarAdd = (data:any) => {
		goods.setShoppingCartAdd(data).then((res:any) => {
			tip.showToast('成功加入购物车！')
			// uni.showModal({
			// 	title:'添加购物车',
			// 	content:'添加成功',
			// 	confirmColor:'#1769ff',
			// 	confirmText:'去结算',
			// 	success:(res:any) => {
			// 		if(res.confirm) {
			// 			switchTab('/pages/shop/shoppingCart')
			// 		}
			// 	}
			// })
		})
	}
	
	const switchTab = (url:string) => {
		uni.switchTab({url:url})
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const resetGoodsQuery = () => {
		goodsData.query = {
			...goodsData.query,
			wpggAs:[],
			wpggBs:[],
			wpggCs:[],
			wpggDs:[],
			wpggEs:[],
			wpggFs:[],
			spzs:'',
			spcd:'',
			spckid:'',
		}
		drawerData.shazhi = drawerData.shazhi.map((i:any) => {return {...i, active:false}})
		drawerData.technology = drawerData.technology.map((i:any) => {return {...i, active:false}})
		drawerData.procedure = drawerData.procedure.map((i:any) => {return {...i, active:false}})
		drawerData.useful = drawerData.useful.map((i:any) => {return {...i, active:false}})
		drawerData.place = drawerData.place.map((i:any) => {return {...i, active:false}})
		drawerData.bleach = drawerData.bleach.map((i:any) => {return {...i, active:false}})
		drawerData.stock = drawerData.stock.map((i:any) => {return {...i, active:false}})
		refresh()
	}
	
</script>
<style>
	page {
		background-color: $uni-bg-card-color;
	}
</style>
<style lang="scss" scoped>
	.zh-goods-list {
		.filter {
			padding: 30rpx;
			background-color: $uni-bg-card-color;
			font-size: 26rpx;
			.left {
				.item {
					padding: 0 30rpx 0 17rpx;
				}
			}
			.right {
				.filter-icon {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
		.list {
			// .item:nth-child(n + 2) {
			// 	border-top: 1rpx solid $uni-border-color;
			// }
			padding:0rpx 30rpx 60rpx;
			background-color: $uni-bg-card-color;
			.item {
				padding: 30rpx 0 40rpx;
				.thumbnail {
					width: 188rpx;
					height: 188rpx;
					background: #FFFFFF;
					border: 1rpx solid #EEEEEE;
					border-radius: 10rpx;
					text-align:center;
					position: relative;
					overflow: hidden;
					.name {
						position: absolute;
						bottom:0;
						width: 188rpx;
						height: 40rpx;
						line-height: 40rpx;
						background: #E0EFFF;
						z-index:1;
						color:#267CF8;
						font-size:22rpx;
					}
					image {
						width: 100%;
						height:100%;
					}
				}
				.right {
					margin-left:30rpx;
					.owns-tags {
						width: 60rpx;
						height:28rpx;
						line-height:28rpx;
						text-align:center;
						background: linear-gradient(90deg, #1769FF, #3795FF);
						border-radius: 4rpx;
						color:#fff;
						font-size:20rpx;
						display:inline-block;
					}
					.tags {
						//margin-top: 20rpx;
						.tags-right {
							text-align:center;
							color:#666666;
							background-color:#F5F6F8;
							padding:0 17rpx;
							height:34rpx;
							line-height: 34rpx;
							font-size: 22rpx;
							margin:20rpx 0 0 10rpx;
							border-radius: 6px;
						}
						
					}
					.content {
						.purchase-car-icon {
							width: 34rpx;
							height: 32rpx;
						}
					}
				}
			}
		}
		.drawer {
			.content {
				padding:0rpx 0rpx 60rpx 30rpx;
				.input {
					width: 478rpx;
					height:60rpx;
					border-radius:10rpx;
					background: #F7F7F7;
					padding-left:30rpx;
					font-size: 24rpx;
				}
			}
			.bottom {
				padding:30rpx 50rpx;
				.reset-btn, .sure-btn {
					width: 225rpx;
					height: 90rpx;
				}
			}
			
		}
	}
</style>
